<template>
	<div>
		<!--内容-->
		<main role="main">

			<section class="jumbotron text-center">
				<div class="container">
					<h1>Coding，不一样的生活</h1>
					<!--<p class="lead text-muted ">
                        知识付费时代刚刚起步，在这个领域有很多的发展机会。整个课程以实战为基础，手把手从零开始，一步一步搭建一个完整的企业级开发架构。不讲废话，只讲干货。
                    </p>-->
					<p>
						<button @click="blogButtionClick()" class="btn btn-primary my-2 p-3 font-weight-bold">点击进入所有博客</button>
						&nbsp;
						<router-link to="/list" class="btn btn-primary my-2 p-3 font-weight-bold">点击进入所有课程</router-link>
					</p>
				</div>
			</section>

			<div class="album py-5 bg-light">
				<div class="container">
					<div class="title1">最新上线</div>
					<Course v-bind:courses="courses"></Course>
					<hr>
					<div class="title1">好课推荐</div>
					<Course v-bind:courses="courses"></Course>
				</div>
			</div>

		</main>
	</div>
</template>

<script>
	import Course from "../components/Course";
	export default {
		name: "index",
		components: {
			Course
		},
		data: function() {
			return {
				courses: [],
				timer: {},
			}
		},
		destroyed: function() {
			console.log("组件销毁");
			// clearInterval(this.timer);
		},
		mounted() {
			let _this = this;
			_this.listNumCourses();
		},
		created() {
			let _this = this;
			//定时刷新数据
			/*_this.timer = setInterval(()=>{
			    _this.listNumCourses()
			}, 5000)*/
		},
		methods: {
			/**
			 * 点击博客按钮
			 */
			blogButtionClick() {
				Toast.warning("该功能开发中...")
			},
			/**
			 * 查找前num门最新课程
			 */
			listNumCourses() {
				let num = 3;
				let _this = this;
				_this.$ajax.get(process.env.VUE_APP_SERVER + '/coding/web/course/list/' + num).then((response) => {
					if (response.data.success) {
						_this.courses = response.data.data;
					}
				})
			}
		}
	}
</script>
<style>
	.title1 {
		margin-bottom: 2rem;
		color: #fafafa;
		letter-spacing: 0;
		text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
		font-size: 2rem;
	}

	.title2 {
		margin-bottom: 2rem;
		color: transparent;
		-webkit-text-stroke: 1px black;
		letter-spacing: 0.04em;
		font-size: 2rem;
	}
</style>
